<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非遗介绍</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="./css/normal-header.css">
    <link rel="stylesheet" href="./css/store.css">
    <link rel="stylesheet" href="./css/footer.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/story.js"></script>
	<style>
	        * {
	            box-sizing: border-box;  /*宽度和高度会包括内边距和边框*/
	        }
	 
	        div.search {
	            padding: 10px 0;
	        }
	 
	        form {
	            position: relative;
	            width: 500px;
	            margin: 0 auto;  /*设置宽度后，居中*/
	        }
	 
	        input,button {
	            border: none;   /*无边框样式；元素的总宽度和高度包括边框的宽度 */
	            outline: none;  /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
	        }
	 
	        .search input {
	            width: 100%;
	            height: 42px;
	            padding-left: 13px;
	            border: 2px solid black;
	            border-radius: 19px;   /*border-radius 属性用于向元素添加圆角边框：*/
	            background: transparent;  /*背景透明*/
	        }
	 
	        .search button {
	            height: 42px;
	            width: 42px;
	            cursor: pointer;  /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
	            position: absolute;
	            background: black;
	            border-radius: 0 19px 19px 0;
	            width: 60px;
	            right: 0;
	        }
	        .search button:hover {
	            background-color: #c7585c;  /*点击搜索按钮时的背景颜色*/
	        }
	 
	        /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
	        .search button:before {
	            content: "搜索";  /*插入的内容*/
	            font-size: 13px;  /*插入内容的字体大小*/
	            color: #F9F0DA;  /*插入内容的字体颜色*/
	        }
	    </style>
	
</head>

<body>
    <!-- 导航栏 -->
  <div class="header">
  	<div class="all">
  		<div class="left">
  		</div>
  		<div class="right">
  			<ul>
  				<li><a href="index.html">首页</a></li>
  				<li><a href="introduce.html">非遗介绍</a></li>
  				<li><a href="specialty.html">非遗故事</a></li>
  				<li><a href="store.html">商城</a></li>
  				<li><a href="story.html">我的</a></li>
  			</ul>
  		</div>
  	</div>
  </div>
    <div class="main">
        <div class="topic-search">
        	<div class="search">
        		<form action="" method="post">
        		            <input placeholder="请输入..." name="keyword" type="text">
        		            <button type="submit"></button>
                </form>
        	</div>
			<div class="onlineshop">
			    <div class="p">
					在线商城
				</div>
			</div>
			<div class="gouwuche">
				<div id="wenzi">
					<a href="">购物车</a>
				</div>
			</div>
			<div class="jifen">
				<div id="wenzi">
					<a href="">积分</a>
				</div>
			</div>
        </div>
		
		<div class="fenlei">
			<div class="quanbu">
				
			</div>
			
			
		</div>
</div>
    <!-- 尾部版权 -->
   <div class="footer">
   	<div class="infor">
   		
   		
   	</div>
   	<div class="call">
   	
   		<div class="number">
   			<img src="" alt="">
   		</div>
   		
   	</div>
   </div>
</body>

</html>